<template>
  <div>
    <h2 class="text-xl font-bold text-gray-800 mb-6">教育背景</h2>
    <div class="space-y-8">
      <div class="flex flex-wrap md:flex-nowrap">
        <div class="w-full md:w-1/4 mb-4 md:mb-0 md:pr-6">
          <div class="text-gray-500 text-sm">毕业时间</div>
        </div>
        <div class="w-full md:w-3/4">
          <div class="flex items-center mb-3">
            <div class="w-12 h-12 bg-gray-100 rounded overflow-hidden flex items-center justify-center mr-3">
              <i class="ri-building-4-line text-gray-500 text-2xl"></i>
            </div>
            <div>
              <h3 class="text-lg font-medium text-gray-800">{{ candidate.university }}</h3>
              <div class="text-sm text-gray-500">{{ candidate.education }} · 相关专业</div>
            </div>
          </div>
          <div class="text-gray-700">
            <p class="mb-3">在校期间表现优秀，具备扎实的专业基础。</p>
            <div class="mb-3">
              <div class="font-medium text-gray-700 mb-2">主修课程</div>
              <div class="flex flex-wrap gap-2">
                <span class="bg-gray-100 text-gray-600 text-xs px-2 py-1 rounded">专业课程1</span>
                <span class="bg-gray-100 text-gray-600 text-xs px-2 py-1 rounded">专业课程2</span>
                <span class="bg-gray-100 text-gray-600 text-xs px-2 py-1 rounded">专业课程3</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { Candidate } from '../types'

interface Props {
  candidate: Candidate
}

defineProps<Props>()
</script>
